import React, { Component } from 'react'
import { View, StyleSheet, TouchableNativeFeedback } from 'react-native'
import { connect } from 'react-redux'
import actionTypes from '../../../store/actionTypes'
import PlayBar from '../../../components/PlayBar'
import Container from './container/container'
import MyIcon from '../../../utils/MyIcon'
import routeNames from '../../../utils/routeNames'

const style = StyleSheet.create({
  button: {
    paddingHorizontal: 12,
    paddingTop: 18,
    paddingBottom: 6,
    position: 'absolute',
    top: 0,
    left: 0
  }
})

function setProgress(progress) {
  return {
    type: actionTypes.SETPROGRESS,
    payload: {
      progress
    }
  }
}

class Home extends Component{
  static navigationOptions = {
    drawerLockMode: 'unlocked'
  }
  render() {
    let { openDrawer, navigate } = this.props.navigation
    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
        <View style={{flex: 1, position: 'relative'}}>
          <Container openDrawer={openDrawer}/>
          {/* 这里暂时在Container的tabBarComponent中调用openDrawer无效，所以通过在本页面放置一个按钮覆盖在tabBar上实现调用openDrawer */}
          <TouchableNativeFeedback onPress={openDrawer}>
            <View style={style.button}>
              <MyIcon name="menu" size={22} color="#343434" />
            </View>
          </TouchableNativeFeedback>
        </View>
        <PlayBar onClick={() => navigate(routeNames.playDetail)}/>
      </View>
    )
  }
}

export default connect(
  state => {
    return {
      progress: state.music.progress,
      playing: state.playing
    }
  },
  {
    setProgress
  }
)(Home)